<template>
  <div class="page">
    <router-link to="/">返回</router-link>
    多个组件的过渡

    <button @click="targetComponents">target</button>
    <transition name="more_com" mode="out-in" appear>
      <component :is="ComponentsName"></component>
    </transition>
  </div>
</template>

<script>
import transition01 from "@c/more_components_transition/transition01";
import transition02 from "@c/more_components_transition/transition02";
export default {
  components: {
    transition01,
    transition02
  },
  data() {
    return {
      ComponentsName: "transition01"
    };
  },
  created() {},
  methods: {
    targetComponents() {
      switch (this.ComponentsName) {
        case "transition01":
          this.ComponentsName = "transition02";
          break;
        case "transition02":
          this.ComponentsName = "transition01";
          break;
      }
    }
  }
};
</script>

<style scoped>
/* .page {
  margin: 50px auto;
} */

.more_com-enter {
  opacity: 0;
  transform: translateX(-10px);
}
.more_com-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

.more_com-enter-active,
.more_com-leave-active {
  transition: all 0.8s ease-in;
}
</style>
